<template>
  <div class="main_box">
    <CommonHeader title="自主申报工作"></CommonHeader>
    <!-- <van-tabs v-model="active" v-if="level != 2">
      <van-tab title="申报"></van-tab>
      <van-tab title="审核"></van-tab>
    </van-tabs> -->
    <div class="main_content">
      <div class="nav_box">
        <div class="tit">选择筛选：</div>
        <div class="content" @click="show = true">
          <div>{{ choseState }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div class="main_list">
        <pull-refresh-list ref="PullRefreshList" :limit="queryInfo.size" :page-no.sync="queryInfo.current" :data.sync="dataList" @getList="initData">
          <div v-for="item in dataList" :key="item.index" class="declare_item" @click="toDetail(item)">
            <div class="content" v-if="level == 0">
              <div class="tit">{{ item.title }}</div>
              <div class="state" :class="formateStateColor(item.reviewStatus)">
                {{ formateState(item.reviewStatus) }}
              </div>
            </div>
            <div class="content" v-if="level == 1">
              <div class="tit">{{ item.title }}</div>
              <div class="state" :class="formateStateColor(item.reviewStatus)">
                {{ formateState(item.reviewStatus) }}
              </div>
            </div>
          </div>
        </pull-refresh-list>
      </div>
    </div>
    <div class="main_footer" v-if="level == 0">
      <van-button round type="info" @click="goForm">开始申报</van-button>
    </div>
    <!-- 弹窗 -->
    <van-popup v-model="show" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="selectList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import PullRefreshList from '@/components/PullRefreshList';

export default {
  // eslint-disable-next-line
  name: 'Declare',
  components: {
    CommonHeader,
    PullRefreshList,
  },
  data() {
    return {
      level: 0,
      active: 0,
      show: false,
      selectList: [
        {
          text: '全部',
          value: '',
        },
        {
          text: '待审核',
          value: '0',
        },
        {
          text: '已审核',
          value: '1',
        },
        {
          text: '未通过',
          value: '2',
        },
      ],
      choseState: '全部',
      queryInfo: {
        state: '', // 审核状态
        current: 1,
        size: 10,
      },
      dataList: [], // 列表数据实体
    };
  },
  watch: {
    active() {
      this.$refs.PullRefreshList.onSearch();
    },
  },
  computed: {
    formateState() {
      return function (state) {
        state = state - 0;
        switch (state) {
          case 0:
            return '待审核';
          case 1:
            return '通过';
          default:
            return '未通过';
        }
      };
    },
    formateStateColor() {
      return function (state) {
        state = state - 0;
        switch (state) {
          case 2:
            return 'red';
          case 1:
            return 'blue';
          default:
            return '';
        }
      };
    },
  },
  created() {
    this.level = this.$route.query.level;
  },
  methods: {
    onConfirm(params) {
      this.choseState = params.text;
      this.queryInfo.auditStatus = params.value;
      this.show = false;
      this.$refs.PullRefreshList.onSearch();
    },
    cancel() {
      this.show = false;
    },
    onSearch() {
      this.$refs.PullRefreshList.onSearch();
    },
    initData(callback) {
      console.log(this.level);
      if (this.level == 0) {
        console.log('申报列表');
        this.$api
          .declarePage({
            page: this.queryInfo.current,
            limit: this.queryInfo.size,
            employeeId: sessionStorage.getItem('employId'),
            auditStatus: this.queryInfo.auditStatus,
          })
          .then((res) => {
            if (res.status === 200) {
              callback(res.data || []);
            } else {
              callback([]);
            }
          });
      }
      // const params = {
      //   _gp: "declarationApp",
      //   _mt: "list",
      //   employeeId: sessionStorage.getItem("employId"),
      //   auditStatus: this.queryInfo.state,
      //   page: this.queryInfo.current,
      //   limit: this.queryInfo.size,
      // };
      // this.$api.commonApi(params).then((res) => {
      //   if (res.errno === 200) {
      //     const rows = res.data.items;
      //     if (callback) callback(rows);
      //   } else {
      //     callback([]);
      //   }
      // });
      // }
      if (this.level == 1) {
        console.log('审核列表');
        this.$api
          .declarePage({
            page: this.queryInfo.current,
            limit: this.queryInfo.size,
            employeeId: sessionStorage.getItem('employId'),
            auditStatus: this.queryInfo.auditStatus,
          })
          .then((res) => {
            if (res.status === 200) {
              callback(res.data || []);
            } else {
              callback([]);
            }
          });
      }
    },
    goForm() {
      this.$router.push('/declareForm');
    },
    toDetail(item) {
      if (this.level == 0)
        this.$router.push({
          path: '/declareDetail',
          query: {
            ...item,
          },
        });
      if (this.level == 1 && item.reviewStatus == 0) {
        this.$router.push({
          path: '/declareExamine',
          query: {
            ...item,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_content {
  padding: 15px;
}
.nav_box {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nav_box .tit {
  width: 100px;
  font-size: 14px;
  color: #999;
  text-align: left;
}
.nav_box .content {
  width: 100%;
  font-size: 14px;
  color: #333;
  display: flex;
}
.nav_box .content .down {
  width: 15px;
  height: 8px;
  background: url('../../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
.main_list {
  width: 100%;
  height: calc(100vh - 145px);
}
.main_footer {
  width: 100%;
  height: 50px;
  font-size: 16px;
  position: fixed;
  left: 0;
  bottom: 0;
}
>>> .van-tabs__line {
  background: #1989fa;
}
.main_footer >>> .van-button {
  width: 90%;
}
.declare_item .content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}
.declare_item .content {
  display: flex;
}
.declare_item .icon {
  width: 18px;
  height: 18px;
  background: url('../../assets/image/right_arrow.png') no-repeat;
  background-size: 100% 100%;
}
.declare_item * {
  cursor: pointer;
}
.declare_item .tit {
  max-width: 200px;
  font-size: 15px;
  margin-right: 15px;
  text-align: left;
}
.declare_item .state {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  background-color: #7f7f7f;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
}
.declare_item .state.red {
  background-color: #f60e36;
}
.declare_item .state.blue {
  background-color: #4ca5f1;
}
</style>